<template>
  <div style="height: 100%;">
  	<el-card class="update-log" style="height: 100%;background-color: #0C2136;border-color: #123355;">
  		<div slot="header" class="clearfix">
  			<span style="color: #ffffff;">故障列表</span>
  		</div>
  		<div class="body" style="height: 100%;">
  			<div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-around;overflow: auto;" id="echart-strend" >
  	      <div style="display: flex;justify-content: space-around;width: 100%;">
  	        <div style="width: 100%;">
  	          <div style="display: flex;width: 100%;">
  	            <div style="color: #fff;">智能锁</div>
  	            <!-- <div style="color: gray;">（{{form.deviceMalfunctionCount}}）</div> -->
  	            <div style="color: gray;">（{{6}}）</div>
  	          </div>
  	          <el-progress :stroke-width="5" color="red" :percentage="6"></el-progress>
  	        </div>
  	        <div style="width: 100%;">
  	          <div style="display: flex;">
  	            <div style="color: #fff;">电表</div>
  	            <div style="color: gray;">（18）</div>
  	          </div>
  	          <el-progress :stroke-width="5" color="#00aaff" :percentage="18"></el-progress>
  	        </div>
  	      </div>
  	      <div style="display: flex;justify-content: space-around;width: 100%;">
  	        <div style="width: 100%;">
  	          <div style="display: flex;width: 100%;">
  	            <div style="color: #fff;">水表</div>
  	            <div style="color: gray;">（43）</div>
  	          </div>
  	          <el-progress :stroke-width="5" color="#00ff7f" :percentage="43"></el-progress>
  	        </div>
  	        <div style="width: 100%;">
  	          <div style="display: flex;width: 100%;">
  	            <div style="color: #fff;">燃气</div>
  	            <div style="color: gray;">（14）</div>
  	          </div>
  	          <el-progress :stroke-width="5" color="#FF8C00" :percentage="14"></el-progress>
  	        </div>
  	      </div>
  	    </div>
  		</div>
  	</el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          userCount: 0,
          deviceNormalCount: 0,
          deviceMalfunctionCount: 0,
          warningCount: 0,
          branchCount: 0,
          lockCount: 0
        },
        percent: 0
      }
    },
    created() {

    },
    methods: {
      init(data) {
        this.form.deviceMalfunctionCount = data.deviceMalfunctionCount
        this.form.lockCount = data.lockCount
        if (this.form.deviceMalfunctionCount > 0) {
          this.percent = this.form.deviceMalfunctionCount / this.form.lockCount * 100
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-card ::v-deep .el-card__header {
    padding: 7px 15px 7px;
    background: linear-gradient(to bottom, #1B506E, #173F5A, #13324C);
    border-bottom: #123355;
  }
  .el-card ::v-deep .el-card__body {
    height: 80%;
  }
</style>
